<template>
  <main class="mymain">
    <div>
      <MyTab1 />
      <MyTab2 @addbs="addbs" :num="num" @refresh='refresh'/>
    </div>
  </main>
</template>

<script>
import MyTab1 from "@/components/home/MyTab1";
import MyTab2 from "@/components/home/MyTab2";
import BetterScroll from "better-scroll";
let bs;
export default {
  data() {
    return {
      num: 1
    };
  },

  components: {
    MyTab1,
    MyTab2
  },
  methods: {
    addbs() {
      bs = new BetterScroll(".mymain", {
        scrollX: false,
        scrollY: true,
        click: true,
        mouseWheel: true,
        pullUpLoad: {
          // 阈值
          threshold: 50
        }
      });

      bs.on("pullingUp", () => {
        // console.log("我拉到底了");
        this.num++;
      });
    },
    refresh() {
      bs.refresh();
      bs.finishPullUp();
    }
  }
};
</script>

<style lang="less" scoped>
main {
  position: fixed;
  top: 156px;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow: hidden;
}
</style>
